<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>公司管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="icon" href="/favicon.ico">
    <link rel="stylesheet" href="/resources/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/resources/css/public.css" media="all" />
    <link rel="stylesheet" href="/resources/layui_ext/dtree/dtree.css" media="all" />
    <link rel="stylesheet" href="/resources/layui_ext/dtree/font/dtreefont.css" media="all" />

</head>
<body bgcolor="#191D60" class="childrenBody">

<div align="center">
   <label style="color:#FFFFFF;font-size:xx-large;text-align: center;background: url('/resources/images/textbg.png')no-repeat">色彩飞扬实时统计</label>
    <img src="/resources/images/textbg.png" width="1000" height="100" />
</div>

<!-- 查询条件开始 -->
<div class="layui-row layui-col-space5" style="background-color: #191D60;">
    <div class="layui-col-md4">
     <div class="layui-card" style="background-color: #191D60;">
        <div class="layui-card-body">
            <div>
                <label style="color:#0C0C0C;font-size: large">今日订单总金额:</label>
                <label style="color:#FD482C;font-size: large;font-weight: bold " id="amount">0.00</label>
            </div>
            <div id="EchartOrderAmount" style="width: 500px;height: 400px;"> </div>
        </div>
     </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card" style="background-color: #191D60;">
            <div class="layui-card-body">
                <div>
                    <label style="color:#0C0C0C;font-size: large">今日订单数量:</label>
                    <label style="color:#FD482C;font-size: large;font-weight: bold " id="orderNum">0</label>
                </div>
                <div id="EchartOrderNum" style="width: 500px;height: 400px;"> </div>
            </div>
        </div>
    </div>

    <div class="layui-col-md4">
        <div class="layui-card" style="background-color: #191D60;">
            <div class="layui-card-body">
                <div>
                    <label style="color:#0C0C0C;font-size: large">今日新增公司数:</label>
                    <label style="color:#FD482C;font-size: large;font-weight: bold " id="groupNum">0</label>
                </div>
                <div id="EchartGroupNum" style="width: 500px;height: 400px;"> </div>
            </div>
        </div>
    </div>
</div>
<!--月度图开始-->
<div class="layui-row layui-col-space5" style="background-color: #191D60;">
    <div class="layui-col-md4">
        <div class="layui-card" style="background-color: #191D60;">
            <div class="layui-card-body">
                <div>
                    <label style="color:#0C0C0C;font-size: large">本月订单总金额:</label>
                    <label style="color:#FD482C;font-size: large;font-weight: bold " id="amountMonth">0.00</label>
                </div>
                <div id="EchartOrderMonthAmount" style="width: 600px;height: 400px;"> </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card" style="background-color: #191D60;">
            <div class="layui-card-body">
                <div>
                    <label style="color:#0C0C0C;font-size: large">本月订单数量:</label>
                    <label style="color:#FD482C;font-size: large;font-weight: bold " id="orderNumMonth">0</label>
                </div>
                <div id="EchartOrderMonthNum" style="width: 550px;height: 400px;"> </div>
            </div>
        </div>
    </div>

    <div class="layui-col-md4">
        <div class="layui-card" style="background-color: #191D60;">
            <div class="layui-card-body">
                <div>
                    <label style="color:#0C0C0C;font-size: large">本月新增公司数:</label>
                    <label style="color:#FD482C;font-size: large;font-weight: bold " id="groupNumMonth">0</label>
                </div>
                <div id="EchartGroupMonthNum" style="width: 500px;height: 400px;"> </div>
            </div>
        </div>
    </div>
</div>

<!--月度图结束-->



<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
    layui.extend({
        echarts: '/resources/js/echarts'   // {/}的意思即代表采用自有路径，即不跟随 base 路径
    }).use(['jquery','form','table','layer','element', 'echarts'],function(){
        var $=layui.jquery;
        var form=layui.form;
        var table=layui.table;
        var layer=layui.layer;
        var element = layui.element;
        var echarts = layui.echarts;

        var chartOrderDayAmount = echarts.init(document.getElementById('EchartOrderAmount'));
        var chartOrderDayNum = echarts.init(document.getElementById('EchartOrderNum'));
        var chartGroupDayNum = echarts.init(document.getElementById('EchartGroupNum'));

        var chartOrderMonthAmount = echarts.init(document.getElementById('EchartOrderMonthAmount'));
        var chartOrderMonthNum = echarts.init(document.getElementById('EchartOrderMonthNum'));
        var chartGroupMonthNum = echarts.init(document.getElementById('EchartGroupMonthNum'));

        //指定图表配置项和数据
        var optionchart = {
            title: {
                text: '商品订单'
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周天']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '销量',
                type: 'bar', //柱状
                data: [100,200,300,400,500,600,700],
                itemStyle: {
                    normal: { //柱子颜色
                        color: 'red'
                    }
                },
            },{
                name:'产量',
                type:'bar',
                data:[120,210,340,430,550,680,720],
                itemStyle:{
                    normal:{
                        color:'blue'
                    }
                }
            }]
        };

        var optionchartZhe = {
            title: {
                text: '商品订单'
            },
            tooltip: {},
            legend: { //顶部显示 与series中的数据类型的name一致
                data: ['销量', '产量', '营业额', '单价']
            },
            xAxis: {
                // type: 'category',
                // boundaryGap: false, //从起点开始
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '销量',
                type: 'line', //线性
                data: [145, 230, 701, 734, 1090, 1130, 1120],
            }, {
                name: '产量',
                type: 'line', //线性
                data: [720, 832, 801, 834, 1190, 1230, 1220],
            }, {
                smooth: true, //曲线 默认折线
                name: '营业额',
                type: 'line', //线性
                data: [820, 932, 901, 934, 1290, 1330, 1320],
            }, {
                smooth: true, //曲线
                name: '单价',
                type: 'line', //线性
                data: [220, 332, 401, 534, 690, 730, 820],
            }]
        };

        var optionchartBing = {
            title: {
                text: '商品订单',
                subtext: '纯属虚构', //副标题
                x: 'center' //标题居中
            },
            tooltip: {
                // trigger: 'item' //悬浮显示对比
            },
            legend: {
                orient: 'vertical', //类型垂直,默认水平
                left: 'left', //类型区分在左 默认居中
                data: ['单价', '总价', '销量', '产量']
            },
            series: [{
                type: 'pie', //饼状
                radius: '60%', //圆的大小
                center: ['50%', '50%'], //居中
                data: [{
                    value: 335,
                    name: '单价'
                },
                    {
                        value: 310,
                        name: '总价'
                    },
                    {
                        value: 234,
                        name: '销量'
                    },
                    {
                        value: 135,
                        name: '产量'
                    }
                ]
            }]
        };

        setInterval(reDrawChart,30000);

        setInterval(reDrawOrderMonth,1800000);

        setInterval(reDrawGroupChart,1800000);


        function reDrawChart()
        {

            $.post("/orderInfo/getDayOrderChart", null, function (res) {

                var nowamount = res.yaxisList[res.yaxisList.length - 1];
                var nownum = res.yaxisList2[res.yaxisList2.length - 1];

                $("#amount").text(nowamount);
                $("#orderNum").text(nownum);

                var optionchartOrderAmount = {
                    title: {
                        text: '订单总金额(日)'
                    },
                    tooltip: {},
                    legend: {
                        data: ['总额']
                    },
                    xAxis: {
                        data: res.xaxisList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '总额',
                        type: 'bar', //柱状
                        data: res.yaxisList,
                        itemStyle: {
                            normal: { //柱子颜色
                                color: 'red'
                            }
                        },
                    }]
                };

                var optionchartOrderNum = {
                    title: {
                        text: '订单总数量(日)'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数量']
                    },
                    xAxis: {
                        data: res.xaxisList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '数量' ,
                        type: 'bar', //柱状
                        data: res.yaxisList2,
                        itemStyle: {
                            normal: { //柱子颜色
                                color: 'green'
                            }
                        },
                    }]
                };
                chartOrderDayAmount.setOption(optionchartOrderAmount, true);
                chartOrderDayNum.setOption(optionchartOrderNum, true);

            })

        }
        reDrawChart();


        function reDrawOrderMonth()
        {

            $.post("/orderInfo/getMonthOrderChart", null, function (res) {

                var nowamount = res.yaxisList[res.yaxisList.length - 1];
                var nownum = res.yaxisList2[res.yaxisList2.length - 1];

                $("#amountMonth").text(nowamount);
                $("#orderNumMonth").text(nownum);

                console.log("benyue:" + nowamount);

                var optionchartOrderAmount = {
                    title: {
                        text: '订单总金额(月)'
                    },
                    tooltip: {},
                    legend: {
                        data: ['总额']
                    },
                    xAxis: {
                        data: res.xaxisList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '总额',
                        type: 'bar', //柱状
                        data: res.yaxisList,
                        itemStyle: {
                            normal: { //柱子颜色
                                color: 'red'
                            }
                        },
                    }]
                };

                var optionchartOrderNum = {
                    title: {
                        text: '订单总数量(月)'
                    },
                    tooltip: {},
                    legend: {
                        data: ['数量']
                    },
                    xAxis: {
                        data: res.xaxisList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '数量' ,
                        type: 'bar', //柱状
                        data: res.yaxisList2,
                        itemStyle: {
                            normal: { //柱子颜色
                                color: 'green'
                            }
                        },
                    }]
                };
                chartOrderMonthAmount.setOption(optionchartOrderAmount, true);
                chartOrderMonthNum.setOption(optionchartOrderNum, true);

            })


        }
        reDrawOrderMonth();
        function reDrawGroupChart()
        {

            $.post("/groupInfo/getDayGroupChart", null, function (res) {

                var nownum = res.yaxisList[res.yaxisList.length - 1];

                $("#groupNum").text(nownum);
                var optionchartGroup = {
                    title: {
                        text: '新增公司(日)',
                        textStyle:{
                            color:'#ffffff',
                            fontSize:16,
                            fontWeight:'normal',
                        },
                    },
                    tooltip: {},
                    legend: {
                        data: ['新增公司数量'],
                        textStyle: {
                            color: '#ffffff'
                        },
                        top:'2%',
                    },
                    xAxis: {
                        data: res.xaxisList,
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        axisTick:{
                            show:false,
                        }
                    },
                    yAxis: {
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff'
                            }
                        },
                        axisTick:{
                            show:false,
                        }
                    },
                    series: [{
                        name: '新增公司数量',
                        type: 'bar', //柱状
                        data: res.yaxisList,
                        itemStyle: {
                            normal: {
                                barBorderRadius: 5,
                                //颜色渐变
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 1, color: '#33cabb'},
                                        {offset: 0, color: '#3EACE5'}
                                    ]
                                )
                            }
                        },
                    }]
                };


                chartGroupDayNum.setOption(optionchartGroup, true);

            })


        }
        reDrawGroupChart();

    });
</script>

</body>
</html>